{% extends 'myadmin/index.html' %}

{% block title %}
<title>BookShop-分类管理</title>
{% endblock %}

{% block con %}
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title  am-cf">分类列表</div>
                </div>

                <div class="widget-body  am-fr">
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <div class="am-form-group">
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <a href="{% url 'myadmin_classifyadd' %}" class="am-btn am-btn-default am-btn-success">
                                        <span class="am-icon-plus"></span> 新增
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black ">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>分类名称</th>
                                    <th>父级ID</th>
                                    <th>路径Path</th>
                                    <th>操作</th>
                                </tr>
                            </thead>

                            <tbody>
                            {% for i in data %}
                                <tr class="gradeX">
                                    <td class="am-text-middle classifyid">{{ i.id }}</td>
                                    <td class="am-text-middle">{{ i.nbsp }}
                                        <span class="classifyname" isclick="0">{{ i.name }}</span>
                                    </td>
                                    <td class="am-text-middle">
                                        {% if i.pid == 0 %}
                                            顶级分类
                                        {%  else %}
                                            {{ i.pname }}
                                        {% endif %}
                                    </td>
                                    <td class="am-text-middle">{{ i.path }}</td>
                                    <td class="am-text-middle">
                                        <div class="tpl-table-black-operation">
                                            <a href="javascript:;" class="tpl-table-black-operation-del delete">
                                                <i class="am-icon-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                                <!-- more data -->
                            </tbody>
                        </table>
                    </div>

                    <div class="am-u-lg-12 am-cf">
                        <div class="am-fr">
                            <ul class="am-pagination tpl-pagination">
                                {% load pagetag %}
                                {% showpage data.paginator.num_pages request %}
                                    <!-- <li class="am-disabled"><a href="#">«</a></li>-->
                                    <!-- <li class="am-active"><a href="#">1</a></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // ajax删除分类
    // 1.为删除绑定单击事件
    $('.delete').click(function(){
        // 2.获取当前点击项中的id
        var classifyid = $(this).parents('tr').find('.classifyid').text()
        var $this = $(this)
        // 3.发送ajax请求到后台进行删除
        $.get('{% url "myadmin_classifydelete" %}',{'id':classifyid},function(data){
            // 4.判断响应的结果
            alert(data['msg'])
            if(data['error'] == 0){
                // 如果后台数据删除成功，则页面中删除该行数据
                // 此时的 %(this) 代表的不再是之前的删除按钮，而是ajax对象，XMLHttpRequest
                $this.parents('tr').remove()
            }
        },'json')
    })

    // ajax编辑分类名称
    // 1.为分类名称绑定双击事件
    $('.classifyname').dblclick(function(){
        // 获取锁定状态
        is = $(this).attr('isclick')
        // 判断锁定状态
        if(is == '0'){
            editclassifyname($(this))
        }
    })

    function editclassifyname($this){
        // 锁定
        $this.attr('isclick','1')

        // 2.获取当前双击项中的name和id
        var name = $this.text()
        var id = $this.parents('tr').find('.classifyid').text()
        // 3.创建input输入框，显示name
        var inp = $('<input value="'+name+'" style="color:red;">')
        // 4.把input放到显示的位置
        $this.html(inp)
        inp.select()

        // 5.为input绑定丧失焦点事件
        inp.blur(function(){
            // 6.丧失焦点后，获取更新后的name
            var newname = $(this).val()
            // 7.判断name是否发生改变
            if(newname == name){
                // 还原
                $this.html(name)
            }else{
                // 8.发送ajax请求到后台，更新分类的name
                $.ajaxSetup({
                    data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
                })
                $.post('{% url "myadmin_classifyedit" %}',{'id':id,'name':newname},function(data){
                    alert(data['msg'])
                    // 9.显示更新后的name
                    if (data['error'] == 0){
                        $this.html(newname)
                    }else{
                        $this.html(name)
                    }
                },'json')
            }
            // 解除锁定
            // 只有触发丧失焦点事件，才能解除锁定
            $this.attr('isclick','0')
        })
    }


</script>

{% endblock %}